<template>
	<view class="main-wrap">
		<view class="merchant-info bg-gradual-green">
			<image class="merchant-avatar" src="https://img.adidas.com.cn/resources/2019/7/26/15641286827893969_230X230.jpg"></image>
			<view class="name-date">
				<text>90号便利店</text>
				<text>已入驻**天</text>
			</view>
			<text class="action-icon cuIcon-settings text-white" @click="go('./setting')"></text>
		</view>
		<view class="performance bg-white">
			<view class="per-item">
				<text>**</text>
				<text class="text-gray">总访客</text>
			</view>
			<view class="per-item">
				<text>**</text>
				<text class="text-gray">订单总数</text>
			</view>
			<view class="per-item">
				<text>**</text>
				<text class="text-gray">订单总金额</text>
			</view>
		</view>
		<section class="con-section">
			<text class="section-title">我的服务</text>
			<view class="cu-list grid" :class="['col-' + gridCol,false?'':'no-border']">
				<view @click="showTaost" class="cu-item" v-for="(item,index) in cuIconList" :key="index" v-if="index<gridCol*2">
					<image class="service-icon" :src="item.cuIcon"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cuIconList: [{
					cuIcon: require('../../static/icon/notice.png'),
					name: '公告管理'
				}, {
					cuIcon: require('../../static/icon/store.png'),
					name: '店铺管理'
				}, {
					cuIcon: require('../../static/icon/image.png'),
					name: '美化图片'
				}, {
					cuIcon: require('../../static/icon/poster.png'),
					name: '制作海报'
				}, {
					cuIcon: require('../../static/icon/service.png'),
					name: '联系客服'
				}],
				gridCol: 4
			}
		},
		methods: {
			showTaost() {
				uni.showToast({
					title: '该功能暂未开放',
					icon: 'none'
				})
			},
			go(url) {
			   uni.navigateTo({
			   	url
			   })
			}
		}
	}
</script>

<style lang="less" scoped>
	.merchant-info{
		display: flex;
		position: relative;
		padding: 140rpx 0rpx 60rpx 30rpx;
		.action-icon{
			position: absolute;
			top: 60rpx;
			right: 20rpx;
			font-weight: 700;
		}
		.merchant-avatar{
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
		}
		.name-date{
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
		}
	}
	.performance{
		display: flex;
		padding: 30rpx 0px;
		.per-item{
			display: flex;
			flex: 1;
			flex-direction: column;
			align-items: center;
			text:last-child{
				font-size: 22rpx;
			}
		}
	}
	.con-section{
		background-color: #FFF;
		padding: 15px;
		.service-icon{
			width: 80rpx;
			height: 80rpx;
			margin: 0px auto;
		}
	}
</style>
